<template>
  <header id="header" class="yui-bar">
        <a href="" class="yui-bar-back" @click="goback"></a>
        <div><slot></slot></div>
        <a href="" class="yui-bar-btn" @click="toolMethod">{{tooltext}}</a>
    </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
    }
  },
  props: ['tooltext'],
  methods: {
    goback(event){
      event.preventDefault();
      if (window.history.length <= 1) {
        this.$router.push({path:'/'})
      }else{
        this.$router.back();
      } 
    },
    toolMethod(event) {
      event.preventDefault();
        this.$emit('herttool');
      }
  },
  created () {
  },
  components: {

  }
}
</script>

<style lang="scss">
    .yui-bar{
        padding-top: 0.6rem;
        box-sizing: content-box;
        height: 1.2rem;
        line-height: 1.2rem;
        text-align: center;
        font-size: 1.1em;
        position: fixed;
        z-index: 500;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff;
        }
        .yui-bar-back{
            display: block;
            position: absolute;
            width: 1.3rem;
            height: 1.2rem;
            left: 0;
            top: 0.6rem;
            background: url(../../assets/img/back@2x.png) no-repeat;
            background-position: center center;
            background-size: 0.45rem 0.45rem;
        }
        .yui-bar-btn{
            display: block;
            position: absolute;
            width: 1.6rem;
            text-align: center;
            height: 1.2rem;
            top: 0.6rem;
            right: 0;
            color: #4D80F1;
        }
</style>
